<template>
  <div class="contentWeb clear">
    <div class="member_menu">
      <Personleft active="project" />
    </div>
    <div class="member_right ">
      <div class="personTengt">
        <Memtitle name="添加项目经验" />
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="180px"
          style="margin-top: 20px;"
        >
          <el-form-item label="项目名称" prop="name">
            <el-input
              placeholder="请输入"
              v-model="form.name"
              style="width: 500px"
            />
          </el-form-item>
          <el-form-item label="项目时间" prop="timeRange">
            <el-date-picker
              v-model="form.timeRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="项目角色" prop="role">
            <el-input
              placeholder="请输入"
              v-model="form.role"
              style="width: 400px"
            />
          </el-form-item>
          <el-form-item label="项目描述" prop="projectDescribe">
            <el-input
              type="textarea"
              v-model="form.projectDescribe"
              rows="5"
              style="width: 60%"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item style="margin-top: 40px">
            <el-button
              style="background: #20a2b2; width: 300px; border: 0; margin-left: 150px;"
              type="primary"
              @click="onSubmit"
              >保存
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Memtitle from '../../components/memtitle'
import Personleft from '../../components/personleft'
import {
  GetQueryString,
  cvProjectExperienceAdd,
  CVProjectExperienceById,
  updateCVProjectExperience
} from '../../assets/js/domains'

export default {
  name: 'PersonWorkAdd',
  components: {
    Personleft,
    Memtitle
  },
  directives: {},
  data () {
    return {
      form: {
        name: '',
        role: '',
        projectDescribe: '',
        timeRange:[],
      },
      rules:{
        name:[
          { required: true, message: '请输入项目名称', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        role:[
          { required: true, message: '请输入项目角色', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        projectDescribe:[
          { required: true, message: '请输入项目描述', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        timeRange:[
          { required: true, message: '请选择项目项目时间', trigger: 'change' },
        ]
      },
      id: 0
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
    this.form.userUid = localStorage.getItem('md_user_uid')
    this.id = this.$route.query.id
  },
  computed: {},
  mounted: function () {
    if (this.id) {
      this.getpost()
    }
  },
  methods: {
    onSubmit(){
      this.$refs.form.validate(valid => {
        if(!valid){
          this.$message.error('请完善后再保存！')
          return;
        } 
        this.submitData()
      })
    },
    submitData() {
      const _this = this
      let params = Object.assign({}, this.form)
      params.approval = '1'
      params.startDate = this.form.timeRange[0]
      params.endDate = this.form.timeRange[1]
      delete params.createTime
      delete params.updateTime
      delete params.timeRange

      if (this.id) {
        updateCVProjectExperience(params).then(function (res) {
          if (res.code === 200) {
            _this.$alert('更新成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                _this.$router.push({ path: '/project' })
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {}
            })
          }
        })
      } else {
        cvProjectExperienceAdd(params).then(function (res) {
          if (res.code === 200) {
            _this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                _this.$router.push({ path: '/project' })
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {}
            })
          }
        })
      }
    },
    getpost () {
      const _this = this
      CVProjectExperienceById({ id: this.id }).then(function (res) {
        if (res.code === 200) {
          _this.form = res.data
          _this.form.timeRange = [
            _this.form.startDate ? _this.form.startDate : '',
            _this.form.endDate ? _this.form.endDate : ''
          ]
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {}
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../assets/css/member";
</style>
